<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML&amp;CSS | V前端技术笔记</title>
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="V前端技术笔记">
    <link rel="preload" href="/vv/assets/css/0.styles.4e101ab7.css" as="style"><link rel="preload" href="/vv/assets/js/app.ae00cca3.js" as="script"><link rel="preload" href="/vv/assets/js/2.5eb07d41.js" as="script"><link rel="preload" href="/vv/assets/js/7.78b8735e.js" as="script"><link rel="prefetch" href="/vv/assets/js/10.e0bab49e.js"><link rel="prefetch" href="/vv/assets/js/11.f6ed8906.js"><link rel="prefetch" href="/vv/assets/js/12.aaeaa660.js"><link rel="prefetch" href="/vv/assets/js/3.b85f619c.js"><link rel="prefetch" href="/vv/assets/js/4.94268aed.js"><link rel="prefetch" href="/vv/assets/js/5.b71de90c.js"><link rel="prefetch" href="/vv/assets/js/6.4e4b8e3f.js"><link rel="prefetch" href="/vv/assets/js/8.6d0594c7.js"><link rel="prefetch" href="/vv/assets/js/9.3be1daac.js">
    <link rel="stylesheet" href="/vv/assets/css/0.styles.4e101ab7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vv/" class="home-link router-link-active"><!----> <span class="site-name">V前端技术笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vv/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/vv/css/" class="nav-link">
  CSS
</a></div><div class="nav-item"><a href="/vv/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/vv/vue/" class="nav-link">
  Vue
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vv/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/vv/network/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/vv/interview/" class="nav-link">
  面试题
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vv/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/vv/css/" class="nav-link">
  CSS
</a></div><div class="nav-item"><a href="/vv/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/vv/vue/" class="nav-link">
  Vue
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vv/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/vv/network/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/vv/interview/" class="nav-link">
  面试题
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>HTML&amp;CSS</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vv/html/#_1-浏览器内核" class="sidebar-link">1.浏览器内核</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_2-盒模型、flex布局、两-三栏布局、水平-垂直居中；" class="sidebar-link">2.盒模型、flex布局、两/三栏布局、水平/垂直居中；</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#水平-垂直居中；" class="sidebar-link">水平/垂直居中；</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_3-bfc、清除浮动；" class="sidebar-link">3.BFC、清除浮动；</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_4-css3动画、h5新特性。" class="sidebar-link">4.css3动画、H5新特性。</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_5-html标签类型？" class="sidebar-link">5.Html标签类型？</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_6-标签语义化的有点" class="sidebar-link">6.标签语义化的有点</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_7-css样式表类型" class="sidebar-link">7.CSS样式表类型</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vv/html/#_8-css选择器" class="sidebar-link">8.css选择器</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="html-css"><a href="#html-css" class="header-anchor">#</a> HTML&amp;CSS</h1> <h2 id="_1-浏览器内核"><a href="#_1-浏览器内核" class="header-anchor">#</a> 1.浏览器内核</h2> <ul><li><strong>IE浏览器内核</strong>：Trident内核，也是俗称的<strong>IE内核</strong>；</li> <li><strong>Chrome浏览器内核</strong>：统称为Chromium内核或Chrome内核，以前是<strong>Webkit内核</strong>，现在是Blink内核；</li> <li><strong>Firefox浏览器内核</strong>：<strong>Gecko内核</strong>，俗称Firefox内核；</li> <li><strong>Safari浏览器内核</strong>：<strong>Webkit内核</strong>；</li> <li><strong>Opera浏览器内核</strong>：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；</li> <li><strong>360浏览器、猎豹浏览器内核</strong>：<strong>IE+Chrome双内核</strong>；</li> <li><strong>搜狗、遨游、QQ浏览器内核</strong>：<strong>Trident（兼容模式）+Webkit（高速模式）</strong>；</li> <li><strong>百度浏览器、世界之窗内核</strong>：IE内核；</li> <li><strong>2345浏览器内核</strong>：以前是IE内核，现在也是<strong>IE+Chrome双内核</strong>；</li></ul> <h2 id="_2-盒模型、flex布局、两-三栏布局、水平-垂直居中；"><a href="#_2-盒模型、flex布局、两-三栏布局、水平-垂直居中；" class="header-anchor">#</a> 2.盒模型、flex布局、两/三栏布局、水平/垂直居中；</h2> <p><strong>盒模型</strong>：</p> <ol><li>标准盒模型：width=content.width  height = content.height</li> <li>IE 盒子模型(怪异盒模型):width = border.width + padding.width + contetn.width;height = border.height+ padding.height+ contetn.height</li></ol> <p><strong>flex布局：</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.parent</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">;</span>
    <span class="token property">flex-direction</span><span class="token punctuation">:</span>column<span class="token punctuation">;</span><span class="token comment">/*row*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.children</span><span class="token punctuation">{</span>
    <span class="token property">flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="水平-垂直居中；"><a href="#水平-垂直居中；" class="header-anchor">#</a> 水平/垂直居中；</h2> <ol><li><p>margin:0 auto</p></li> <li><p>父元素relative 子元素absolute  transfrom：translate（-50%，-50%）</p></li> <li><p>flex布局</p></li> <li><p>display：table-cell</p></li></ol> <h2 id="_3-bfc、清除浮动；"><a href="#_3-bfc、清除浮动；" class="header-anchor">#</a> 3.BFC、清除浮动；</h2> <p>清除浮动：</p> <ol><li>父元素设置overflow：hidden</li> <li>在浮动的元素下面使用一个空元素</li> <li>伪元素:after   clear:both</li></ol> <p>BFC: 格式化上下文</p> <p><strong>二、形成BFC的条件</strong></p> <p>1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；</p> <p><strong>三、BFC的特性</strong></p> <p>1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素</p> <h2 id="_4-css3动画、h5新特性。"><a href="#_4-css3动画、h5新特性。" class="header-anchor">#</a> 4.css3动画、H5新特性。</h2> <p>css 动画：animation动画  transition过度</p> <p>H5 新特性</p> <ol><li><p>语义化标签：header footer section nav aside article</p></li> <li><p>增强型表单：input 的多个type</p></li> <li><p>新增表单元素：datalist keygen output</p></li> <li><p>新增表单属性：placehoder required min max</p></li> <li><p>音频视频：audio video</p></li> <li><p>canvas</p></li> <li><p>地理定位：Geolocation  Navigator.geolocation</p></li> <li><p>拖拽</p></li> <li><p>本地缓存：localStorage sessionStorage</p></li> <li><p>新事件：onresize ondrag onscorll onmousewheel onerror onplay onpause</p></li> <li><p>WebSocket</p></li></ol> <h2 id="_5-html标签类型？"><a href="#_5-html标签类型？" class="header-anchor">#</a> 5.Html标签类型？</h2> <ul><li>块级元素、行内元素、行内块元素</li></ul> <h2 id="_6-标签语义化的有点"><a href="#_6-标签语义化的有点" class="header-anchor">#</a> 6.标签语义化的有点</h2> <ul><li>html结构清晰</li> <li>代码可读性号</li> <li>无障碍阅读</li> <li>搜索引擎可根据标签的语言确定上下文和权重问题</li> <li>移动设备能更完美的展示页面</li> <li>便于团队维护开发</li></ul> <h2 id="_7-css样式表类型"><a href="#_7-css样式表类型" class="header-anchor">#</a> 7.CSS样式表类型</h2> <ol><li>内部样式表</li> <li>外部样式表</li> <li>内联样式表</li></ol> <h2 id="_8-css选择器"><a href="#_8-css选择器" class="header-anchor">#</a> 8.css选择器</h2> <ol><li>class选择器</li> <li>id选择器</li> <li>*通配符选择器</li> <li>包含选择器</li> <li>伪类选择器</li> <li>伪对象选择器</li> <li>群组选择器</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/vv/assets/js/app.ae00cca3.js" defer></script><script src="/vv/assets/js/2.5eb07d41.js" defer></script><script src="/vv/assets/js/7.78b8735e.js" defer></script>
  </body>
</html>
